<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
  <style>

      .btn{
          display: inline-block;
          width: 120px;
          height: 30px;
          border-radius: 15px;
          /*border: 1px solid transparent;*/
      }

      /* 情景色*/

      .success{
          background-color: green;
      }

      .danger{
           background-color: red;
      }

      .warning{
         background-color: yellow;
      }

      .info{
          background-color: grey;
      }

      .primary{
           background-color: #4e6ef2;
      }

      .btn-group .btn:not(:first-child):not(:last-child){
           border-radius: 0;
      }

      .btn-group .btn:first-child:not(:last-child){
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
      }

      .btn-group .btn:last-child:not(:first-child){
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }

      .btn-group .btn{
          margin-left: -6px;
      }

  </style>
</head>
<body>


<div class="btn-group">
  <button class="btn success">按钮1</button>
<!--  <button class="btn danger">按钮2</button>-->
<!--  <button class="btn info">按钮3</button>-->
<!--  <button class="btn primary">按钮4</button>-->

</div>


</body>
</html>